<template>
  <div class="app-container">
    <!-- <div class="header_title_box">
      <h2>基本信息</h2>
    </div> -->
    <!-- 搜索 -->
    <form-selections :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch">
      <div class="mb10">
        <el-button size="mini" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </form-selections>
    <!-- <div class="select_form_box">
      <div class="filter-container">
        <el-input v-model="queryParam.company_name" size="small" placeholder="客户名称" class="input-with-select mr16" @keyup.enter.native="getList()" />
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="getList()">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </div> -->
    <!-- 导出 -->
    <div class="operation_button_box mb10">
      <el-button v-action="'Settlement@storageFeeExport'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
    </div>
    <!-- 表格 -->
    <div v-loading="loading">
      <el-table :data="data" border fit :max-height="screenHeigh">
        <el-table-column type="selection" width="51" align="center" />
        <el-table-column label="客户名称" prop="company_name" align="center" min-width="101">
          <template slot-scope="scope">
            <code-item :code="scope.row.company_name" @click="toInfo(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="depart_name" align="center" min-width="101">
          <template slot-scope="scope">
            <span> {{ scope.row.depart_name ? scope.row.depart_name : '-' }} </span>
          </template>
        </el-table-column>
        <el-table-column label="客户编码" prop="company_code" align="center" min-width="101" />
        <el-table-column label="客户类型" prop="company_type_text" align="center" />
        <!-- <el-table-column label="客户类型" prop="company_type" align="center" width="308">
          <template slot-scope="scope">
            <dic-values :dictionaries="DICTIONARIES.type" :code="scope.row.company_type" />
          </template>
        </el-table-column> -->
        <el-table-column label="仓储费用(USD)" prop="storage_fee" align="center" />
        <el-table-column label="扣减额度" prop="quota" align="center" width="207" />
        <el-table-column label="创建时间" prop="created_at" align="center" width="167" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[50, 100, 200, 500]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import formOperate from '../../../layout/mixin/formOperate'
import codeItem from '../../../components/base/code'
// import dicValues from '../../../components/dicTransform/index'
import cacheList from '@/layout/mixin/cacheList'
import DownModul from '@/components/DownModul/index.vue'
import { action } from '@/directive/permission/index.js'
export default {
  name: 'StorageFee',
  components: {
    codeItem,
    // dicValues,
    DownModul
  },
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 380,
      componentName: 'StorageFee',
      url: '/settlement/storage-fee',
      queryParam: {
        company_name: '',
        department_name: '',
        limit: 50
      },
      formItems: [
        {
          label: '客户名称',
          key: 'company_name',
          type: 'input',
          placeholder: '请输入客户名称'
        },
        {
          label: '部门',
          key: 'department_name',
          type: 'input',
          placeholder: '请输入部门'
        }
      ],
      DICTIONARIES: {
        type: [
          // 商品所属客户类型 0-内部员工 1-客户商品
          {
            code: 0,
            name: '代仓储'
          },
          {
            code: 1,
            name: '自营'
          }
        ]
      },
      exportUrl: '/settlement/storage-fee-export',
      cachePaths: [
        '/settlement/storageFee/info'
      ],
      optionsModul: [
        {
          key: 'company_name',
          label: '客户名称'
        },
        {
          key: 'depart_name',
          label: '部门'
        },
        {
          key: 'company_code',
          label: '客户编码'
        },
        {
          key: 'company_type_text',
          label: '客户类型'
        },
        {
          key: 'storage_fee',
          label: '仓储费用'
        },
        {
          key: 'quota',
          label: '扣减额度'
        }
      ]
    }
  },
  methods: {
    // 导出
    handleExport() {
      const vm = this
      const { company_name, department_name } = vm.queryParam
      const params = { company_name, department_name }
      //   vm.handleExportxlsx(vm.exportUrl, params)
      vm.downLoadParams = params
      vm.formVisibleDown = true
    },
    toInfo(row) {
      const vm = this
      vm.$router.push({ path: `/settlement/storageFee/info/${row.id}`, query: { department_id: row.department_id } })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
